<template>
	<view class="content">
		<u-search :show-action="true" v-model="code" @change="getAl" placeholder="请输入搜索内容"
			:showAction="false"></u-search>
		<!-- 内容 -->
		<view class="P_content">
			<view class="a_b" @click="clickItem(item)" v-for="(item,index) in P_list" :key="index">
				<u-image width="100%" height="220rpx" :src="getImage(item.caPic)"></u-image>
				<view class="a_t">
					{{item.caName}}
				</view>
			</view>
		</view>
		
		<image :src="src" mode="scaleToFill" class="images"></image>
	</view>
</template>

<script>
	import {
		url
	} from '@/common/index.js'
	import {
		getAl,getBg
	} from "@/common/api.js"
	export default {
		data() {
			return {
				code: "",
				url: url,
				P_list: [],
				src:""
			}
		},
		methods: {
			async getBg() {
				let data = await getBg(129)
				this.src = url + data.rows[0].baUrl
			},
			clickItem(item) {
				uni.navigateTo({
					url: "/pagesIndex/common/page?type=1&item=" + JSON.stringify(item)
				})
			},
			async getAl() {
				let data = await getAl("")
				this.P_list = data.rows
			},
			getImage(data) {
				return url + data
			}
		},
		created() {
			this.getAl()
			this.getBg()
		}
	}
</script>

<style>
	.content {
		padding: 30rpx;
	}

	.P_content {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 30rpx;
		animation: moveRight 2s;
		/* 动画名称，持续时间，迭代次数 */
	}

	/* 定义动画 */
	@keyframes moveRight {
		from {
			transform: translateY(-200rpx);
		}

		to {
			transform: translateY(0);
			/* 从当前位置平移100像素 */
		}
	}

	.a_b {
		width: 48%;
		margin-bottom: 20rpx;
	
	}

	.a_t {
		text-align: center;
		padding: 10rpx 0;
		font-size: 28rpx;
		color: #C49266;
	}
	
	.images {
		width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: -1;
			height: 100vh;
	}
</style>